/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Fragment } from "react";
import {
  ToolbarAndroid,
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Image,
  ImageBackground,
  FlatList,
  ActivityIndicator,
  TouchableHighlight,
  TouchableOpacity
} from "react-native";

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions
} from "react-native/Libraries/NewAppScreen";
import HttpUtil from "./js/utils/HttpUtil";
import SongList from "./js/pages/SongList";
import SongDetail from './js/pages/SongDetail/SongDetail';
import Search from './js/pages/Search/Search'
import {
  createStackNavigator,
  createAppContainer,
  createBottomTabNavigator,
  createDrawerNavigator
} from "react-navigation";
//import FontAwesome  from 'react-native-vector-icons/FontAwesome';
import MaterialIcons from "react-native-vector-icons/MaterialIcons";
import icons from './js/assets/Icon'
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [],
      finish: false
    };
  }
  componentDidMount() {
    // HttpUtil.get("https://www.mxnzp.com/api/music/recommend/list").then(res => {
    //   console.log(res);
    //   this.setState({
    //     data: res.data,
    //     finish: true
    //   });
    // });
  }
  // renderItem(item) {
  //   console.log(item);
  //   return (
  //     <TouchableHighlight underlayColor="rgba(34,26,38,0.1)" onPress={()=>{
  //       console.log(`${item.item.title}`);
  //     }}>
  //       <View style={{flexDirection:'row'}}>
  //         <View style={{padding:25}}>
  //           <Image
  //             source={{ uri: item.item.pic_small }}
  //             style={{ width: 100, height: 100 }}
  //           />
  //         </View>
  //         <View style={{marginTop:40}}>
  //           <Text style={{fontSize:24}}>{item.item.title}</Text>
  //           <View style={{flexDirection:'row',marginTop:20}}>
  //             <Text>{item.item.author}</Text>
  //             <Text style={{marginLeft:20}}>{item.item.publishtime}</Text>
  //           </View>
  //         </View>
  //       </View>
  //     </TouchableHighlight>
  //   );
  // }
  render() {
    // if (!this.state.finish) {
    //   return (
    //     <View style={styles.container}>
    //       <ActivityIndicator/>
    //     </View>
    //   );
    // }
    return (
      <Fragment>
        {/* <View style={styles.container}> */}
        {/* <Text style={styles.text}>123</Text> */}
        {/* <View style={[styles.item,styles.itemOne]}>
            <Text style={styles.itemText}>a</Text>
          </View>
          <View style={[styles.item,styles.itemTwo]}>
            <Text style={styles.itemText}>b</Text>
          </View>
          <View style={[styles.item,styles.itemThree]}>
            <Text style={styles.itemText}>b</Text>
          </View> */}
        {/* 含有可以包含内容的背景图组件 */}
        {/* <ImageBackground
            source={{
              uri:
                "http://i0.sinaimg.cn/lx/beauty/p/2008/0402/U318P8T1D685880F913DT20080402164141.jpg"
            }}
            style={styles.backgroundImage}
          >
            <View style={styles.overlay}>
              <Text style={styles.overTitle}>1</Text>
              <Text>2</Text>
            </View>
          </Imahttps://www.mxnzp.com/api/music/recommend/listgeBackground> */}
        {/* <FlatList data={this.state.data} renderItem={this.renderItem} />
        </View> */}
        {/* <ToolbarAndroid /> */}
        {/* <SongList/> */}
        <AppRouter />
      </Fragment>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#eae7ff",
    flex: 1,
    justifyContent: "center"
  },
  backgroundImage: {
    flex: 1,
    resizeMode: "cover"
  },
  overlay: {
    backgroundColor: "rgba(0,0,0,0.3)",
    alignItems: "center",
    fontWeight: "200",
    padding: 10
  },
  overTitle: {
    color: "#fff",
    fontSize: 33
  },
  text: {
    color: Colors.dark,
    fontSize: 18,
    fontStyle: "italic",
    lineHeight: 33,
    fontWeight: "300",
    textDecorationLine: "underline",
    textDecorationStyle: "dashed"
  },
  item: {
    backgroundColor: "#fff",
    borderWidth: 1,
    borderColor: "#6435c9",
    margin: 6
  },
  itemText: {
    fontSize: 32,
    padding: 20
  },
  itemOne: {
    alignSelf: "flex-start"
  },
  itemTwo: {
    alignSelf: "center"
  },
  itemThree: {
    alignSelf: "flex-end"
  }
});
const SimpleTopNavigator = createBottomTabNavigator(
  {
    page1: {
      screen: SongList,
      navigationOptions: {
        tabBarLabel: "音乐", // tabBar显示的文字
        title:'音乐',
        tabBarIcon: (
          { tintColor } // tabBar显示的图标
        ) => (
          // 这里使用了react-native-vector-icons, 不熟悉的请看上方连接
          <MaterialIcons name={"apps"} size={30} color={tintColor} />
        )
      }
    },
    page2: {
      screen: SongList,
      navigationOptions: {
        tabBarLabel: "音乐", // tabBar显示的文字
        title:'音乐',
        tabBarIcon: (
          { tintColor } // tabBar显示的图标
        ) => (
          //这里使用了react-native-vector-icons, 不熟悉的请看上方连接
          <MaterialIcons name={"apps"} size={30} color={tintColor} />
        )
      }
    },
    page3: {
      screen: Search,
      navigationOptions: {
        tabBarLabel: "音乐", // tabBar显示的文字
        title:'搜索',
        tabBarIcon: (
          { tintColor } // tabBar显示的图标
        ) => (
          //这里使用了react-native-vector-icons, 不熟悉的请看上方连接
          <MaterialIcons name={"apps"} size={30} color={tintColor} />
        )
      }
    }
  },
  {
    initialRouteName: "page1",
    tabBarPosition: "bottom",
    tabBarOptions: {
      activeTintColor: "#e91e61"
    }
  }
);
const AppTopRouter = createAppContainer(SimpleTopNavigator);
const SimpleAppNavigator = createStackNavigator(
  {
    App: {
      screen: AppTopRouter,
      navigationOptions: {
        title: "音乐",
        //右边
        headerRight: (
          <TouchableOpacity style={{ backgroundColor: "#fff" }}>
            <Text
              style={{
                color: "#000",
                fontSize: 20,
                fontWeight: "bold",
                marginRight: 10
              }}
            >
              右边
            </Text>
          </TouchableOpacity>
        )
      }
    },
    Detail:{
      screen:SongDetail,
      navigationOptions: {
        title: "详情",
        //右边
        headerRight: (
          <TouchableOpacity style={{ backgroundColor: "#fff" }}>
            <Text
              style={{
                color: "#000",
                fontSize: 20,
                fontWeight: "bold",
                marginRight: 10
              }}
            >
              右边
            </Text>
          </TouchableOpacity>
        )
      }
    }
  },
  {
    initialRouteName: "App",
    headerMode: "screen"
  }
);
const AppRouter = createAppContainer(SimpleAppNavigator);
export default App;
